// 问题管理页面
<template>
	<div class="all">
		<el-button type="primary" @click="addQuestion">新增问题</el-button>
		<div id="datediv">
			<el-date-picker v-model="logdate" type="datetimerange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至"
			 start-placeholder="开始日期" end-placeholder="结束日期" @change="changeTime"> </el-date-picker>
		</div>

		<div id="searchdiv">
			<el-input placeholder="请输入内容" v-model="keywords" class="input-with-select">
				<el-select v-model="select" slot="prepend" style="width: 110px;">
					<el-option label="问题标题" value="1"></el-option>
					<el-option label="问题内容" value="2"></el-option>
				</el-select>
				<el-button slot="append" icon="el-icon-search" @click="searchQuestion"></el-button>
			</el-input>
		</div>
		<div style="height: 10px;"></div>

		<el-table :data="pagination.records" border>
			<el-table-column width="120px" fixed="left" prop="questionId" label="问题编号" sortable></el-table-column>
			<el-table-column prop="questionTitle" label="问题标题"></el-table-column>
			<el-table-column prop="questionContent" label="问题内容"></el-table-column>
			<el-table-column prop="user.userId" label="发布者编号"></el-table-column>
			<el-table-column prop="user.userName" label="发布者名字"></el-table-column>
			<el-table-column prop="questionDate" label="发布问题时间" sortable></el-table-column>
			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">
					<el-button @click="reply(scope.row.questionId,scope.row.questionTitle,scope.row.questionContent)" type="primary"
					 size="small">回复</el-button>
					<el-button @click="checkGrade(scope.row.questionId)" type="primary" size="small">编辑</el-button>
					<el-button @click="deleteById(scope.row.questionId)" type="danger" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current"
		 :page-sizes="[5, 10]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
		 class="page">
		</el-pagination>
		<!-- 编辑对话框-->
		<el-dialog title="编辑问题信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<section class="update">
				<el-form ref="form" :model="form" label-width="100px">
					<el-form-item label="问题标题">
						<el-input v-model="form.questionTitle"></el-input>
					</el-form-item>
					<el-form-item label="问题内容">
						<el-input v-model="form.questionContent"></el-input>
					</el-form-item>
					<el-form-item label="发布者编号">
						<el-input v-model="form.user.userId" @input="changeId"></el-input>
					</el-form-item>
					<el-form-item label="发布者名字">
						<el-input v-model="form.user.userName" readonly="readonly"></el-input>
					</el-form-item>
				</el-form>
			</section>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 新增对话框-->
		<el-dialog title="新增问题信息" :visible.sync="dialogVisible02" width="30%" :before-close="handleClose">
			<section class="add">
				<el-form ref="form" :model="form" label-width="100px">
					<el-form-item label="问题标题">
						<el-input v-model="form.questionTitle"></el-input>
					</el-form-item>
					<el-form-item label="问题内容">
						<el-input v-model="form.questionContent"></el-input>
					</el-form-item>
					<el-form-item label="发布者编号">
						<input v-model="form.user.userId" class="el-input__inner" @input="changeId"></input>
					</el-form-item>
					<el-form-item label="发布者名字">
						<el-input v-model="form.user.userName" readonly="readonly"></el-input>
					</el-form-item>
				</el-form>
			</section>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="add()">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 编辑回复 -->
		<el-dialog title="回复信息" :visible.sync="replydialogVisible" width="30%" :before-close="handleClose">
			<section class="update">
				<el-form ref="form" :model="form" label-width="100px">
					<el-form-item label="问题编号">
						<el-input v-model="form.questionId"></el-input>
					</el-form-item>
					<el-form-item label="问题标题">
						<el-input v-model="form.questionTitle"></el-input>
					</el-form-item>
					<el-form-item label="问题内容">
						<el-input v-model="form.questionContent"></el-input>
					</el-form-item>
					<el-form-item label="回复内容">
						<el-input v-model="form.replyContent"></el-input>
					</el-form-item>
						<el-input type="hidden" v-model="form.user.userId"></el-input>
				</el-form>
			</section>
			<span slot="footer" class="dialog-footer">
				<el-button @click="replydialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="replyQuestion()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pagination: {
					//分页后的问题列表
					current: 1, //当前页
					total: null, //记录条数
					size: 10, //每页条数
				},
				dialogVisible: false, //对话框
				dialogVisible02: false, //对话框
				replydialogVisible: false,
				logdate: '',
				keywords: '',
				select: '',
				form: {
          user:{
            userId:"",
            userName:""
          }
        }, //保存点击以后当前问题的信息
			};
		},
		created() {
			this.getQuestionInfo();
			this.checkGrade02(0);

		},
		methods: {
			getQuestionInfo() {
				//分页查询所有问题信息
				this.$axios(`/api/gqbl`, {
					params: {
						questionTitle: "",
						questionContent: "",
						startTime: this.logdate[0],
						endTime: this.logdate[1],
						select: this.select,
						keywords: this.keywords,
						page: this.pagination.current,
						size: this.pagination.size,
					}
				}).then(res => {
					console.log(res.data)
					console.log(res.data.records)
					this.pagination = res.data;
				}).catch(error => {});
			},
			//改变当前记录条数
			handleSizeChange(val) {
				console.log(val)
				this.pagination.size = val;
				this.getQuestionInfo();
			},
			//改变当前页码，重新发送请求
			handleCurrentChange(val) {
				this.pagination.current = val;
				this.getQuestionInfo();
			},
			checkGrade(questionId) { //修改问题信息
				this.dialogVisible = true
				this.$axios(`/api/getQuestionById/${questionId}`).then(res => {
					this.form = res.data;
					console.log(this.form);

				})
			},
			checkGrade02(questionId) { //修改问题信息
				this.$axios(`/api/getQuestionById/${questionId}`).then(res => {
					this.form = res.data;
				})
			},
			addQuestion() { //新增的表单
				//清空表单
				this.form.questionTitle = ''
				this.form.questionContent = ''
				this.form.user.userId = ''
				this.form.user.userName = ''
				this.dialogVisible02 = true
			},
			add() { //增加问题信息
				this.dialogVisible02 = false
				this.$axios({
					url: '/api/insertQuestion',
					method: 'post',
					data: {
						...this.form
					}
				}).then(res => {
					console.log("res:" + res)
				})

			},
			deleteById(questionId) { //删除问题信息
				console.log("questionId:" + questionId)
				this.$confirm("确定删除该问题吗？删除后无法恢复", "Warning", {
					confirmButtonText: '确定删除',
					cancelButtonText: '算了,留着吧',
					type: 'danger'
				}).then(() => { //确认删除
					this.$axios({
						url: `/api/delQuestion/${questionId}`,
						method: 'delete',
					}).then(res => {
						this.getQuestionInfo()
					})
				}).catch(() => {

				})
			},
			changeId() {
				console.log("触发函数");
				var i = this.form.user.userId
				this.$axios({
					url: 'api/gui/' + i
				}).then(res => {
					console.log(res.data)
					this.form.user.userName = res.data
				})
			},
			submit() { //提交更改
				this.dialogVisible = false
				this.$axios({
					url: '/api/updateQuestion',
					method: 'post',
					data: {
						...this.form
					}
				}).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.$message({
							message: '更新成功',
							type: 'success'
						})
					}
					this.getQuestionInfo()
				})
			},
			replyQuestion() {
				this.replydialogVisible = false
				this.form.user.userId = this.$cookies.get("cid")
				console.log(this.form.questionId)
				this.$axios({
					url: '/api/insertReply',
					method: 'post',
					data: {
						question : {
							questionId : this.form.questionId
						},
						replyContent : this.form.replyContent,
						user : {
							userId : this.form.user.userId
						}
					}
				}).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.$message({
							message: '回复成功，请转至回复表查看回复',
							type: 'success'
						})
					}
					this.getQuestionInfo()
				})
      },
      reply(id, title, content) {
          console.log(id);
          this.form.questionId = id
          this.form.questionTitle = title
          this.form.questionContent = content
          this.replydialogVisible = true
        },
        changeTime(data) { //时间改变进行查询
          this.getQuestionInfo();
        },
        searchQuestion() { //搜索按钮
          this.getQuestionInfo()
        },
        handleClose(done) { //关闭提醒
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            }).catch(_ => {});
        }
      }
	};
</script>
<style lang="scss" scoped>
	.all {
		padding: 0px 40px;

		.page {
			margin-top: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.edit {
			margin-left: 20px;
		}

		.el-table tr {
			background-color: #dd5862 !important;
		}
	}

	.el-table .warning-row {
		background: #000 !important;
	}

	.el-table .success-row {
		background: #dd5862;
	}

	#searchdiv {
		width: 400px;
		display: inline-block;
		margin-left: 8%;
	}

	#datediv {
		display: inline-block;
		width: 300px;
		margin-left: 40%;
	}
</style>
